        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
          font-family: 'Arial', sans-serif;
        }

        body {
          display: flex;
          flex-direction: column;
          height: 100vh;
          background-color: #f5f5f5;
          position: relative;
          color: #666;
        }

        .tcb {
          font-size: 20px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 28.96px;
          color: rgba(47, 49, 53, 1);
          text-align: center;
          line-height: 50px;
          margin-left: 90px;
          margin-right: 10px;
        }

        .nav_top {
          display: flex;
          background-color: #fff;
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
          z-index: 10;
          background: linear-gradient(to left, #e6f7ff, #b6d3eed2);
          height: 50px;

        }

        .top-nav-item {
          padding: 15px 20px;
          cursor: pointer;
          position: relative;
          font-size: 14px;
          color: #666;
          margin-left: 56px;
        }



        /* 图片 */
        .nav_top img {
          position: absolute;
          width: 40px;
          height: 40px;
          right: 30px;
          border-radius: 50%;
        }

        /* 高光 */
        .top-nav-item.active {
          color: #1890ff;
          border-bottom: 2px solid #1890ff;
        }


        .task-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 15px 20px;
          background-color: #fff;
          border-bottom: 1px solid #e8e8e8;
          background: linear-gradient(to left, #e6f7ff, #b6d3eed2);
        }

        .task-title {
          font-size: 18px;
          font-weight: 500;


        }

        .export-btn {
          padding: 5px 15px;
          background-color: #1890ff;
          color: white;
          border: none;
          border-radius: 4px;
          cursor: pointer;
        }

        .main-content {
          display: flex;
          flex: 1;
          overflow: hidden;

        }


        .left-nav {
          width: 264px;
          background-color: #fff;
          border-right: 1px solid #e8e8e8;
          display: flex;
          flex-direction: column;
          height: 100%;
          transition: width 0.3s;
          color: #666;
          z-index: 9;
          background: linear-gradient(to top, #e6f7ff, #b6d3eed2);

        }

        .left-nav.collapsed {
          width: 0;
          overflow: hidden;
        }

        .left-nav-item {
          padding: 12px 20px;
          cursor: pointer;
          border-left: 3px solid transparent;
        }

        .left-nav-item.active {
          border-left: 3px solid #1890ff;
          background-color: #f3f6f7b0;
          color: #1890ff;
        }

        .collapse-btn {
          margin-top: auto;
          padding: 15px;
          text-align: center;
          cursor: pointer;
          color: #666;

        }

        .collapse-btn:hover {
          color: #333;
        }

        .content-area {
          flex: 1;
          padding: 20px;
          background-color: #fff;
          overflow-y: auto;
        }


        .add-task {
          position: absolute;
          bottom: 0;
          right: 0;
          width: calc(100% - 264px);
          padding: 15px 20px;
          background-color: #fff;
          border-top: 1px solid #e8e8e8;
          display: flex;
          transition: width 0.5s;
        }

        .left-nav.collapsed~.add-task-container {
          width: 100%;
        }

        .task-input {
          flex: 1;
          padding: 10px 15px;
          border: 1px solid #d9d9d9;
          border-radius: 4px;
          outline: none;
          width: 1584px;
          height: 60px;
        }

        .task-input:focus {
          border-color: #1890ff;
        }

        .publish-btn {
          margin-left: 10px;
          padding: 10px 20px;
          background-color: #1890ff;
          color: white;
          border: none;
          border-radius: 4px;
          cursor: pointer;
          border-radius: 20px;
        }

        .mmm progress {
          margin: 0 5px;
        }

        /* 进度条 */
        .task-progress {
          display: flex;
          align-items: center;
          margin-bottom: 20px;
        }

        .progress-label {
          color: #666;
          margin-right: 10px;
        }

        .progress-bar {
          width: 200px;
          height: 10px;
          background: #f0f0f0;
          border-radius: 5px;
          overflow: hidden;
        }

        .progress {
          height: 100%;
          background: #1a73e8;
          transition: width 0.3s ease;
          /* 动画过渡效果 */
        }

        .progress-text {
          color: #666;
          margin-left: 10px;
        }